<template>
	<div class="systemFirmwarePage">
		<div class="pageInfo">
			<div class="pageInfoRowHeader">
				<span class="title">固件信息</span>
			</div>
			<!-- <div class="pageInfoRow">
				<span class="title">固件版本信息</span>
			</div> -->
			<!-- <div class="pageInfoRow">
				<span class="title">当前版本号</span>
				<span class="text">V3.6.1 build 20220808</span>
			</div>
			<div class="pageInfoRow">
				<span class="title">上次固件库更新时间</span>
				<span class="text">2002-09-09 14:18</span>
			</div> -->
			<div class="pageInfoRow">
				<span class="title titleLink" @click="versionRecord">版本升级记录</span>
			</div>
		</div>
		<div class="pageUpgrade">
			<div class="pageUpgradeHeader">
				<span>离线包导入升级</span>
			</div>
			<div class="pageUpgradeBody">
				<el-upload
					class="upload-demo"
					:action="actionStr"
					multiple
					:show-file-list="false"
					:on-change="fileChange"
					:on-progress="fileProgress"
				>
					<el-link type="primary">选择离线升级包</el-link>
				</el-upload>
				<div class="fileNameStyle">{{ "您选择的文件是：" + fileText }}</div>
			</div>
			<div class="pageUpgradeFooter">
				<!-- <el-button type="info" :loading="true">升级</el-button>
				<span>更新进度：50%，正在备份文件…</span> -->
				<span class="title titleLink" @click="packageList">升级包记录</span>
			</div>
		</div>
		<!-- 自定义alertBox弹框——版本升级记录 -->
		<AlertBox :alertBoxVisible="alertBoxTabVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>版本升级记录</p>
					<i class="wj-icon-guanbi" @click="alertBoxTabclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="tabList">
						<el-table :data="tableDataAlertBox" style="width: 100%" :cell-class-name="tableCellClassName">
							<el-table-column type="index" prop="id" width="50" label="序号"> </el-table-column>
							<el-table-column prop="clientName" label="终端名称" width="180"> </el-table-column>
							<el-table-column prop="createTime" label="升级日期" width="180"> </el-table-column>
							<el-table-column prop="" label="升级类型" width="120">{{ "固件升级" }}</el-table-column>
							<el-table-column prop="curVersion" label="初始版本号" width="180"> </el-table-column>
							<el-table-column prop="upgradeVersion" label="目的版本号" width="180"> </el-table-column>
							<el-table-column prop="status" label="执行结果">
								<template slot-scope="scope">
									<span v-if="scope.row.status == 0">{{ "待升级" }}</span>
									<span v-if="scope.row.status == 1">{{ "升级中" }}</span>
									<span v-if="scope.row.status == 2">{{ "成功" }}</span>
									<span v-if="scope.row.status == 3">{{ "失败" }}</span>
								</template>
							</el-table-column>
							<el-table-column prop="logDetails" label="描述信息" width="120">
								<template slot-scope="scope">
									<el-link type="primary" @click="handleRowDetails(scope.$index, scope.row)">查看</el-link>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="tabPage">
						<el-pagination
							background
							@size-change="handleSizeChangeAlertBox"
							@current-change="handleCurrentChangeAlertBox"
							:current-page="currentPage"
							:page-sizes="[9]"
							:page-size="pageSize"
							layout="total, prev, pager, next, jumper"
							:total="total"
						>
						</el-pagination>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="alertBoxTabclose">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——详情 -->
		<AlertBox :alertBoxVisible="alertBoxDetailsVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>版本升级记录详情</p>
					<i class="wj-icon-guanbi" @click="alertBoxDetailsclose"></i>
				</div>
				<div class="contentBox_body">
					<!-- <div class="infoEveryItem">1. 下载升级包… 成功</div>
					<div class="infoEveryItem">2. 校验升级包… 成功</div>
					<div class="infoEveryItem">3. 解压升级文件到临时目录… 成功</div>
					<div class="infoEveryItem">4. 备份旧版本文件… 成功</div>
					<div class="infoEveryItem">5. 固件升级中… 失败，原因可能是：升级过程被异常中断。已经将版本恢复为V3.6.0</div> -->
					{{ recordDes }}
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="backPreList">返回上一级</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹窗——升级包 -->
		<AlertBox :alertBoxVisible="alertBoxTabVisiblePackage">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>升级包记录</p>
					<i class="wj-icon-guanbi" @click="alertBoxTabPackageclose"></i>
				</div>
				<div class="contentBox_body">
					<div class="tabList">
						<el-table :data="tableDataAlertBoxPackage" style="width: 100%">
							<el-table-column type="index" prop="id" width="50" label="序号"> </el-table-column>
							<el-table-column prop="name" label="升级包名称" width="180"> </el-table-column>
							<el-table-column prop="createTime" label="上传时间" width="180"> </el-table-column>
							<el-table-column prop="version" label="版本号" width="180"> </el-table-column>
							<el-table-column prop="description" label="描述内容"> </el-table-column>
							<el-table-column prop="" label="操作" width="120">
								<template slot-scope="scope">
									<el-link type="primary" @click="handleTerminalUpgrade(scope.$index, scope.row)">升级</el-link>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="tabPage">
						<el-pagination
							background
							@size-change="handleSizeChangeAlertBoxPackage"
							@current-change="handleCurrentChangeAlertBoxPackage"
							:current-page="currentPagePackage"
							:page-sizes="[9]"
							:page-size="pageSizePackage"
							layout="total, prev, pager, next, jumper"
							:total="totalPackage"
						>
						</el-pagination>
					</div>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="alertBoxTabPackageclose">确定</wj-Button>
				</div>
			</div>
		</AlertBox>
		<!-- 自定义alertBox弹框——终端 -->
		<AlertBox :alertBoxVisible="alertBoxTerminalVisible">
			<div class="contentBox">
				<div class="contentBox_header">
					<p>选择升级终端</p>
					<i class="wj-icon-guanbi" @click="alertBoxTerminalclose"></i>
				</div>
				<div class="contentBox_body">
					<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
					<div style="margin: 15px 0"></div>
					<el-checkbox-group v-model="checkedTerminals" @change="handleCheckedCitiesChange">
						<el-checkbox v-for="city in terminals" :label="city.id" :key="city.id">{{ city.name + '（' + city.version + '）' }}</el-checkbox>
					</el-checkbox-group>
				</div>
				<div class="contentBox_footer">
					<wj-Button type="save" @click="terminalsUpgrade">升级</wj-Button>
					<wj-Button type="save" @click="backPreListTerminal">返回上一级</wj-Button>
				</div>
			</div>
		</AlertBox>
	</div>
</template>
<script>
import httpUrl from "@/utils/request/httpUrl";
import {
	firmware_updata,
	firmware_selectUpgradePackage,
	firmware_terminalUpgrade,
	firmware_selectTerminalUpgradeRecord,
	issueflow_group,
	issueflow_terminal_byGroupId,
} from "@/utils/request/api";
export default {
	name: "SystemFirmware",
	data() {
		return {
			// 文件上传  文件名
			fileText: "",
			// 文件上传  组件需要用的action
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/clientUpgradeFile"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/clientUpgradeFile"
					: "",
			// 自定义弹窗控制——记录
			alertBoxTabVisible: false,
			// 自定义弹窗控制——详情
			alertBoxDetailsVisible: false,
			recordDes: "",
			// 分页当前页码
			currentPage: 1,
			// 总页码
			total: 0,
			// 每页条数
			pageSize: 10,
			// 分页初始化页码
			pageNum: 1,
			// 表格数据-升级记录
			tableDataAlertBox: [
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "成功",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "成功",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "成功",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "失败",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "失败",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "成功",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "成功",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "成功",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "失败",
				// 	logDetails: "升级详情数据...",
				// },
				// {
				// 	upgradeDate: "2022-03-03 15:30",
				// 	upgradeType: "固件升级",
				// 	startVersion: "V3.6.1 build 20220808",
				// 	version: "V3.6.1 build 20220808",
				// 	upgradeResult: "失败",
				// 	logDetails: "升级详情数据...",
				// },
			],
			// 升级包
			alertBoxTabVisiblePackage: false,
			// 自定义弹窗控制——终端
			alertBoxTerminalVisible: false,
			// 分页当前页码
			currentPagePackage: 1,
			// 总页码
			totalPackage: 0,
			// 每页条数
			pageSizePackage: 10,
			// 分页初始化页码
			pageNumPackage: 1,
			// 升级包数据
			tableDataAlertBoxPackage: [
				// {
				// 	id: 1,
				// 	name: "升级包1.0",
				// 	version: "V3.6.1",
				// 	description: "修复xxbug...",
				// 	create_time: "2023-04-04 06:25:15",
				// },
				// {
				// 	id: 2,
				// 	name: "升级包2.0",
				// 	version: "V3.6.2",
				// 	description: "修复xxbug...",
				// 	create_time: "2023-04-04 06:25:15",
				// },
				// {
				// 	id: 3,
				// 	name: "升级包3.0",
				// 	version: "V3.6.3",
				// 	description: "修复xxbug...",
				// 	create_time: "2023-04-04 06:25:15",
				// },
				// {
				// 	id: 4,
				// 	name: "升级包4.0",
				// 	version: "V3.6.3",
				// 	description: "修复xxbug...",
				// 	create_time: "2023-04-04 06:25:15",
				// },
				// {
				// 	id: 5,
				// 	name: "升级包5.0",
				// 	version: "V3.6.5",
				// 	description: "修复xxbug...",
				// 	create_time: "2023-04-04 06:25:15",
				// },
			],
			packageId: undefined, // 保存升级包id
			checkAll: false, // 默认不全选
			checkedTerminals: [], // 默认选中的终端
			terminals: [], // 所有终端（先查终端组再通过组id查询该组下的终端）
			isIndeterminate: false, // 如果有默认选中的终端，全选是-
		};
	},
	created() {},
	mounted() {
		this.selectRecord(this.pageNum, this.pageSize);
		this.selectPackage(this.pageNumPackage, this.pageSizePackage);
	},
	methods: {
		// 查询所有升级记录
		selectRecord(page, size) {
			firmware_selectTerminalUpgradeRecord({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBox = res.data.result;
					this.total = res.data.total;
				} else {
					this.$msg.error("版本升级记录获取失败！");
				}
			});
		},
		// 查询所有升级包
		selectPackage(page, size) {
			firmware_selectUpgradePackage({
				page: page,
				size: size,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.tableDataAlertBoxPackage = res.data.result;
					this.totalPackage = res.data.total;
				} else {
					this.$msg.error("升级包记录获取失败！");
				}
			});
		},
		// 文件上传  进度条
		fileProgress(event, file, fileList) {
			console.log(event);
			console.log(file);
			console.log(fileList);
		},
		// 文件上传  文件发生改变
		fileChange(file, fileList) {
			console.log("----");
			console.log(file);
			console.log(fileList);
			console.log("----");
			// if (file.status !== 'ready') return;
			this.fileText = file.name;
			if (file.status == "success" && file.percentage == 100) {
				firmware_updata({
					// file: new FormData().append('file',file.raw)
					file: file.raw,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						this.$msg.success("文件上传成功，请到升级包处进行升级！");
					} else {
						this.$msg.error("文件上传失败！");
					}
				});
			}
		},
		// 版本记录
		versionRecord() {
			this.alertBoxTabVisible = true;
		},
		// alertBox——记录 关闭
		alertBoxTabclose() {
			this.alertBoxTabVisible = false;
		},
		// 分页组件事件——弹窗
		handleSizeChangeAlertBox(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChangeAlertBox(val) {
			console.log(`当前页: ${val}`);
			this.selectRecord(val, this.pageSize);
		},
		// 详情
		handleRowDetails(index, row) {
			console.log(index, row);
			// 关闭列表弹窗
			this.alertBoxTabVisible = false;
			// 打开详情弹窗
			this.alertBoxDetailsVisible = true;
			this.recordDes = row.description;
		},
		// 成功和失败——文字样式
		tableCellClassName({ row, column, rowIndex, columnIndex }) {
			console.log(row);
			console.log(rowIndex);
			console.log(column);
			console.log(columnIndex);
			if (row.status == "2" && columnIndex == 6) {
				return "forbidden-row-success";
			}
			if (row.status == "3" && columnIndex == 6) {
				return "forbidden-row-default";
			}
			if (row.status == "0" && columnIndex == 6) {
				return "forbidden-row-await";
			}
			if (row.status == "1" && columnIndex == 6) {
				return "forbidden-row-midway";
			}
			return "";
		},

		// alertBox——详情 关闭
		alertBoxDetailsclose() {
			this.alertBoxDetailsVisible = false;
		},
		// 返回上一次
		backPreList() {
			// 关闭详情弹窗
			this.alertBoxDetailsVisible = false;
			// 打开列表弹窗
			this.alertBoxTabVisible = true;
		},
		// 升级包记录
		// 打开
		packageList() {
			this.alertBoxTabVisiblePackage = true;
		},
		// 关闭
		alertBoxTabPackageclose() {
			this.alertBoxTabVisiblePackage = false;
		},
		// 分页组件事件——弹窗
		handleSizeChangeAlertBoxPackage(val) {
			console.log(`每页 ${val} 条`);
		},
		handleCurrentChangeAlertBoxPackage(val) {
			console.log(`当前页: ${val}`);
			this.selectPackage(val, this.pageSizePackage);
		},
		// 升级选择终端
		handleTerminalUpgrade(index, row) {
			console.log(index, row);
			// 保存升级包id
			this.packageId = row.id;
			// 关闭列表弹窗
			this.alertBoxTabVisiblePackage = false;
			// 打开终端弹窗
			this.alertBoxTerminalVisible = true;
			this.terminals = [];
			issueflow_group()
				.then((res) => {
					if (res.code == 200) {
						return res.data;
					}
				})
				.then((res) => {
					console.log(res);
					res.forEach((item) => {
						issueflow_terminal_byGroupId({
							groupId: item.id,
						}).then((res) => {
							console.log(res);
							if (res.code == 200) {
								if (res.data.length > 0) {
									res.data.forEach((item) => {
										this.terminals.push(item);
									});
								}
								console.log(this.terminals);
							} else {
								this.$msg.error("查询终端失败！");
							}
						});
					});
				});
		},
		// alertBox——终端 关闭
		alertBoxTerminalclose() {
			this.alertBoxTerminalVisible = false;
		},
		// 返回上一次
		backPreListTerminal() {
			// 关闭终端弹窗
			this.alertBoxTerminalVisible = false;
			// 打开列表弹窗
			this.alertBoxTabVisiblePackage = true;
		},
		// 全选终端
		handleCheckAllChange(val) {
			if (val == true) {
				this.checkedTerminals = this.terminals.map((item) => {
					return item.id;
				});
			} else {
				this.checkedTerminals = [];
			}
			this.isIndeterminate = false;
		},
		// 单个选中终端
		handleCheckedCitiesChange(value) {
			let checkedCount = value.length;
			this.checkAll = checkedCount === this.terminals.length;
			this.isIndeterminate = checkedCount > 0 && checkedCount < this.terminals.length;
		},
		// 终端升级
		terminalsUpgrade() {
			console.log(this.checkedTerminals);
			firmware_terminalUpgrade({
				packageId: this.packageId,
				idList: this.checkedTerminals,
			})
				.then((res) => {
					console.log(res);
					// 关闭终端弹窗
					this.alertBoxTerminalVisible = false;
					// 打开列表弹窗
					this.alertBoxTabVisiblePackage = false;
					if (res.code == 200) {
						this.$msg.success("请到版本升级记录中查看！");
					} else {
						this.$msg.error("终端升级失败，请重新选择终端！");
					}
				})
				.catch((error) => {
					console.log(error);
					// 关闭终端弹窗
					this.alertBoxTerminalVisible = false;
					// 打开列表弹窗
					this.alertBoxTabVisiblePackage = false;
				});
		},
	},
};
</script>
<style lang="less" scoped>
.systemFirmwarePage {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	.pageInfo {
		width: 30%;
		/*height: 216px;*/
		border: 1px solid #eee;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.pageInfoRowHeader {
			width: 100%;
			height: 42px;
			font-size: 16px;
			background: #f2f2f2;
			border-bottom: 1px solid #d9d9d9;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			span.title {
				margin: 0 12px;
			}
		}
		.pageInfoRow {
			width: 100%;
			height: 42px;
			font-size: 16px;
			background: #ffffff;
			border-bottom: 1px solid #d9d9d9;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			span.title {
				margin: 0 12px;
				font-size: 14px;
			}

			span.titleLink {
				color: #2890bf;
			}
			span.titleLink:hover {
				cursor: pointer;
			}

			span.text {
				flex: 1;
				font-size: 14px;
				margin: 0 12px 0 0;
				color: #aeaeae;
				text-align: right;
			}
		}
		.pageInfoRow:last-child {
			border-bottom: none;
		}
	}
	.pageUpgrade {
		width: 69%;
		height: 216px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.pageUpgradeHeader {
			width: 100%;
			height: 42px;
			span {
				display: inline-block;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				padding: 0 12px;
				border: 1px solid #d9d9d9;
			}
		}
		.pageUpgradeBody {
			width: 100%;
			padding: 0 24px;
			box-sizing: border-box;
			height: calc(100% - 42px - 42px - 16px);
			margin: 8px 0;
			background: #f2f2f2;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: flex-start;
			.fileNameStyle {
				font-size: 14px;
			}
		}
		.pageUpgradeFooter {
			width: 100%;
			height: 42px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			span.title {
				margin: 0 12px;
				font-size: 14px;
			}

			span.titleLink {
				color: #2890bf;
			}
			span.titleLink:hover {
				cursor: pointer;
			}
			/deep/ .el-button {
				font-size: 14px;
				padding: 8px 18px;
				margin-right: 12px;
			}
			span {
				flex: 1;
			}
		}
	}
	/deep/ .el-checkbox {
		margin-bottom: 12px;
	}
}
</style>
